<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta name="Copyright" content="初志鑫真帅">
		<meta name="Description" content="初志鑫真帅">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<title>繁忙的人啊不要难为了自己</title>
		<link rel="stylesheet" href="css/frozenui.css">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto-1.1.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.mod_num .n_bd .num_wrap .digit strong {
				display: block;
				width: 26px;
				height: 75px;
				background-image: url(img/num-1.png);
				background-size: 26px auto;
				background-repeat: repeat-y;
			}
		</style>
		<script type="text/javascript">
			var key;
			$(function() {
				$.ajax({
					type: "get",
					url: "json/key.json",
					async: false,
					dataType: "json",
					success: function(re) {
						key = re.key;
						$("#biao1").text(key);
					}
				});
				$(".act_content").click(function() {
					var Url2 = document.getElementById("biao1").innerText;
					var oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					//alert('复制成功');
				});
			});
		</script>
	</head>

	<body ontouchstart="">
		<span style="display: none;" id="biao1"></span>
		<div onclick="" class="act_content">
			<section class="mod_banner">
				<img src="img/banner-1.png" alt="" width="100%">
			</section>
			<section class="mod_num">
				<div class="n_hd">
					<p>以下是天意</p>
				</div>
				<div class="n_bd num_eight">
					<!--  className : num_eight/num_nine -->
					<div class="num_wrap ">
						<span class="digit" data-num="6"><strong class="digit-7" style="background-position-y: -2325px;"></strong></span>
						<span class="digit" data-num="1"><strong class="digit-6" style="background-position-y: -2400px;"></strong></span>
						<span class="digit" data-num="4"><strong class="digit-4" style="background-position-y: -2475px;"></strong></span>
						<span class="digit" data-num="5"><strong class="digit-8" style="background-position-y: -2550px;"></strong></span>
						<span class="digit" data-num="1"><strong class="digit-8" style="background-position-y: -2625px;"></strong></span>
						<span class="digit" data-num="3"><strong class="digit-9" style="background-position-y: -2700px;"></strong></span>
						<span class="digit" data-num="5"><strong class="digit-9" style="background-position-y: -2775px;"></strong></span>
						<span class="digit" data-num="8"><strong class="digit-5" style="background-position-y: -2850px;"></strong></span>
						<span class="digit" data-num="6"><strong class="digit-7" style="background-position-y: -2325px;"></strong></span>

					</div>
				</div>
			</section>
			<section class="mod_tips">
				<p class="title"><span></span>该预言永久有效</p>
				<span class="tips_success start">恭喜获得！</span>
				<button onclick="zx()" class="btn_reg">这大概是我当程序员唯一的乐趣</button>
				<br />
				<a class="btn_reg" href="http://wpa.qq.com/msgrd?v=3&uin=1204505056&site=qq&menu=yes"> 无聊的时候就点这里陪我聊聊天</a>
			</section>

		</div>
		<script>
			function zx() {

				var waitTime = 1;
				var isDataGet = false;

				//设置一个定时器不断轮训
				setInterval(function() {

					if(!isDataGet) {
						waitTime++;

						$('.digit strong').each(function(index, item) {
							var tempPos = parseInt($(this).css('background-position-y'));
							$(this).css('background-position-y', tempPos - 300 + 'px');

						})

					} else {

						setTimeout(function() {
							$('.tips_success').addClass('start');
							$('.btn_reg').removeClass('disabled');
						}, 500)
					}
				}, 500)

				//后台callback获取数据，然后填充
				setTimeout(function() {

					isDataGet = true;
					var finalNum = 123456789;

					$('.digit strong').each(function(index, item) {
						var tempPos = parseInt($(this).css('background-position-y'));
						var finalArr = finalNum.toString().split('');

						$(this).css('background-position-y', -750 * parseInt(waitTime / 10000) - 75 * finalArr[index] + 'px');

					})

				}, 5000)

			}
			$(function() {
				zx();
			});
		</script>

	</body>

</html>